<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    BTM机器管理
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>添加设备</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box" style="width:100%">
            <el-form ref="form"  :model="device" :rules="rules"  label-width="110px" >
                <div class='baseinfo'>
                <span class='baseinfo_title'>设备信息</span>
                <el-form-item label="设备编号" prop="code">
                    <el-input placeholder="请输入设备编号"  v-model="device.code" style="width:300px;" size='small'></el-input>
                </el-form-item>
                <el-form-item label="设备名称" prop="name">
                    <el-input placeholder="请输入设备名称"  v-model="device.name" style="width:300px;" size='small'></el-input>
                </el-form-item>
                <el-form-item label="国家" >
                    <el-select v-model="device.address.cityName" placeholder="设备投放地址" @focus="getCountry" @change='addCountry(country)' size='small'>
                        <el-option 
                        v-for='(item,index) in country' 
                        :key="index" 
                        :label="item.chineseName" 
                        :value="item.chineseName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备地址" prop="detail">
                  <el-input v-model="device.address.detail" placeholder="请输入设备完整地址" style="width:300px;"></el-input>
                </el-form-item>
                <el-form-item label='经纬度'>
                    <el-input placeholder="百度经度" v-model='device.address.mapLon' style="width:300px;display: block;"></el-input>
                    <el-input placeholder="百度维度" v-model='device.address.mapLat' style="width:300px;display: block;margin-top: 10px;"></el-input>
                    <el-button type='primary' size='small' @click='showMap'>获取经纬度</el-button>
                </el-form-item>
                <el-form-item label='谷歌经纬度'>
                    <el-input placeholder="经度" v-model='device.address.googleLon' style="width:300px;display: block;"></el-input>
                    <el-input placeholder="维度" v-model='device.address.googleLat' style="width:300px;display: block;margin-top: 10px;"></el-input>
                </el-form-item>
                

                <!-- <el-form-item label="设备名称" prop="name">
                    <el-input v-model="device.name" placeholder="请输入设备名称" style="width:300px;" size="small"></el-input>
                </el-form-item>-->
                <!-- <el-form-item label="设备名称" prop="name">
                    <el-input v-model="device.name" placeholder="请输入设备名称" style="width:300px;" size='small'></el-input>
                </el-form-item> -->
                <!--
                <el-form-item label="设备参数">
                    <el-input v-model="device.params" placeholder="请输入设备参数"  style="width:300px;" size='small'></el-input>
                </el-form-item> -->
                <el-form-item label="设备状态">
                    <el-radio-group v-model="device.status" disabled>
                        <el-radio-button label="0" value="0" size='small'>正常</el-radio-button>
                        <el-radio-button label="1" value="1" size='small'>停止</el-radio-button>
                        <el-radio-button label="2" value="2" size='small'>故障</el-radio-button>
                        <el-radio-button label="3" value="3" size='small'>维修中</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label='小额取款箱'>
                  <el-input style='width: 300px;' placeholder="面额"  v-model='device.tempBoxes[0].denomination'></el-input>
                </el-form-item>
                <el-form-item label='大额取款箱'>
                  <el-input style='width: 300px;' placeholder="面额"  v-model='device.tempBoxes[1].denomination'></el-input>
                </el-form-item>
                <!-- <el-form-item label='存款箱'>
                  <el-input style='width: 300px;' placeholder="面额"  v-model='device.tempBoxes[2].denomination'></el-input>
                </el-form-item> -->
                <el-form-item style="margin-top:30px;">
                    <el-button type="primary" @click="onSubmit('form')">提交</el-button>
                    <!-- <el-button>取消</el-button> -->
                </el-form-item>
              </div>
            </el-form>
        </div>
      
      <loading v-if="loading" :tip='tip'></loading>
      <el-dialog :visible.sync="mapShow" class="maps">
        <baidu-map @enter='detailMsg'></baidu-map>
      </el-dialog>
    </div>
</template>

<script>

import * as rpConfig from "../../../../rpConfig/constant";
import { HttpReq } from "../../../service/server";
import {api,apiGet} from "@/api/index";
import loading from '@/components/common/loading.vue';
import BaiduMap from "@/components/common/map.vue";
import axios from 'axios';
import jsonp from 'jsonp';
let Server = new HttpReq();
export default {
  components: {
    loading,
    BaiduMap
  },
  created() {

  },
  data: function() {
    return {
      mapShow:false,
      tip:'',
      loading:false,
      address:{},
      device:{
        address:{
          cityName:'',
          detail:'',
          googleLat: "",
          googleLon: "",
          mapLat: "",
          mapLon: ""
        },
        name:'',//名称
        params:'',//参数,
        status:"0",//状态
        code: "",
        country: 0,
        currencyCode: "",
        description: "",
        tempBoxes:[{//设备盒子
          denomination:'',//面额
          type:'小额取款箱'
        },
        {//设备盒子
          denomination:'',//面额
          type:'大额取款箱'
        },
        {//设备盒子
          denomination:'0',//面额
          type:'存款箱'
        },
        ]
      },
      form: {
        address:{},
        name:'',//名称
        params:'',//参数,
        status:'',//状态
        code: "",
        country: 0,
        currencyCode: "",
        description: "",
      },
      country:[],
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" }
        ],
        'address.cityName': [
          {required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        code:[
          {required: true, message:'请输入设备编号',trigger:'blur'}
        ],
        detail: [
          //{ type:'string',required: true, message: "请设置发布时间", trigger: "blur" }
        ]
      },
      editorOption: {
        placeholder: "请输入文章内容"
        // something config
      },
      typeCenter: []
    };
  },
  methods: {
    showMap(){
      this.mapShow=true;
    },
    detailMsg(data){
      // axios.defaults.headers.common['Access-Control-Allow-Origin']='*';
      //console.log(data);
      this.device.address.mapLon=data.lng;
      this.device.address.mapLat=data.lat;
      // var callback=function(data){
      //   return data;
      // };
      jsonp('http://api.gpsspg.com/convert/coord/?oid=7950&from=2&to=1&latlng='+data.lat+','+data.lng+'&output=jsonp',null,(err,data)=>{
        if(err){
          //console.log(err)
        }else{
          //console.log(data);
          if(data.status==200){
            var address=data.result[0];
            this.device.address.googleLon=address.lng;
            this.device.address.googleLat=address.lat;
          }else{
            this.$message.warning('获取经纬度信息失败,请稍后再试');
          }
         }
      })
      this.mapShow=false;
    },
    uploadToServer(id) {
      let formdata = new FormData();
      let self = this;
      let file = document.getElementById(id).files[0];
      formdata.append("image", file);
      Server._POST_FILE(
        rpConfig.API_URI + "/Helpapi/uploadImg",
        formdata,
        function(data) {
          let value = data.data.url;
          //console.log(value);
          self.addImgRange = self.$refs.rpEditor.quill.getSelection();
          self.$refs.rpEditor.quill.insertEmbed(
            self.addImgRange != null ? self.addImgRange.index : 0,
            "image",
            value,
            Quill.sources.USER
          );
        }
      );
    },
    getType() {
      let self = this;
      Server._POST(
        rpConfig.API_URI + "/newscenter.Index/getNewsType",
        {},
        function(response) {
          self.typeCenter = response.data;
        }
      );
    },
    onEditorChange({ editor, html, text }) {
      this.form.content = html;
    },
    addCountry(data){
      data.forEach(item=>{
        if(item.chineseName==this.device.address.cityName){
          this.address=item;
        }
        // //console.log(item)
      })
    },
    onSubmit(formName) {
      this.loading=true;
      this.tip="提交设备信息";
      //console.log(this.device)
      const self = this;
      if(!this.device.code){
        this.loading=false;
        return this.$message.warning('设备编号未填写！');
      }
      if(!this.device.name){
        this.loading=false;
        return this.$message.warning('设备名称未填写！');
      }
      self.$refs[formName].validate(valid => {
        if (valid) {
          // this.device.address.cityName=this.address.chineseName;
          // this.device.address.detail=this.address.detail;
          // this.device.code=this.address.code;
          this.device.country=this.address.id;
          api.drive.getDriveList(this.device).then(res=>{
            this.$message.success(res.message);
            this.$router.push('/deviceCenter');
            this.loading=false;
          }).catch(err=>{
            this.loading=false;
            self.$message.error(err.message);
          })
        } else {
          self.$message.error("文章内容不完整");
          return false;
        }
      });
    },
    getNewsDetail: function($a_id) {
      let self = this
      Server._POST(
        rpConfig.API_URI + "/newscenter.Index/getNewsDetail",
        { a_id: $a_id },
        function(data) {
        
          self.form.a_id = data.data.a_id;
          self.form.a_title = data.data.a_title;
          self.form.a_type_id = data.data.a_type_id ;
          self.form.a_publish_time = data.data.a_publish_time;
          self.form.a_state = data.data.a_state;
          self.form.a_sort = data.data.a_sort;
          self.form.content = data.data.a_contain;
          self.form.toTop = data.data.a_top > 0 ? true : false;
          self.form.recommond = data.data.a_recommend > 0 ? true : false;
        }
      );
    },
    getCountry(page=0){
      var params={
        page:page,
        size:10,
      }
      apiGet.country.getCountry(params).then(res=>{
        //console.log(res)
        this.country=res.content;
        // for(var i=0;i<4;i++){
        //   this.country.push(res.content)
        // }
      })
    }
  },
  mounted() {
    // this.getCountry();
  }
};
</script>
<style scoped>
.maps{
  
}
.baseinfo {
  border: 1px solid #40abf9;
  border-radius: 3px;
  padding: 60px 20px 20px;
  position: relative;
  margin-bottom: 15px;
  box-sizing: border-box;
  width: 100%;
}
.baseinfo_title {
  display: block;
  background: #40abf9;
  color: #fff;
  padding: 6px 15px;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
}
div.el-form-item{
    margin-bottom: 30px;
}
.el-form-item__content {
  margin-left: 0 !important;
}

</style>